<div class="main">
    <h2 *ngIf="!container">Add a new container</h2>
    <h2 *ngIf="container">Edit container <i>{{container.name}}</i></h2>
    <div class="description">A Container is used to execute shell commands into a specific environment. The entrypoint of the container must be a non-terminating command. You can use an image pulled from a registry or an image built by an Image command.</div>
    <form [formGroup]="form">
        <mat-form-field appearance="outline" class="mid-width">
            <mat-label><span>Name</span></mat-label>
            <mat-error>Lowercase words separated by dashes. Ex: my-container</mat-error>
            <input placeholder="unique name to identify the container" data-cy="container-name" matInput formControlName="name">
        </mat-form-field>
        <mat-form-field appearance="outline" class="mid-width">
            <mat-label><span>Image</span></mat-label>
            <input placeholder="Image to start the container" data-cy="container-image" matInput formControlName="image">
        </mat-form-field>
        <h3>Command and Arguments</h3>
        <div class="description">Command and Arguments can be used to override the entrypoint of the image</div>
        <app-multi-text dataCyPrefix="container-command" formControlName="command" label="Command" addLabel="Add command" deleteLabel="Delete command"></app-multi-text>
        <app-multi-text dataCyPrefix="container-arg" formControlName="args" label="Arg" addLabel="Add arg" deleteLabel="Delete arg"></app-multi-text>

        <h3>Environment Variables</h3>
        <div class="description">Environment Variables to define in the running container</div>
        <app-multi-key-value dataCyPrefix="container-env" addLabel="Add Environment Variable" deleteLabel="Delete Environment Variable" formControlName="env"></app-multi-key-value>

        <h3>Volume Mounts</h3>
        <div class="description">Volumes to mount into the container's filesystem</div>
        <app-volume-mounts
            [volumes]="volumeNames"
            formControlName="volumeMounts"
            (createNewVolume)="onCreateNewVolume($event)"></app-volume-mounts>
        
    
        <h3>Endpoints</h3>
        <div class="description">Endpoints exposed by the container</div>
        <app-endpoints formControlName="endpoints"></app-endpoints>

        <div class="outbutton"><button data-cy="container-more-params" *ngIf="!seeMore" mat-flat-button (click)="more()">More parameters...</button></div>

        <div *ngIf="seeMore">
    
            <h3>Resource Usage</h3>
            <div class="description">CPU and Memory resources necessary for container's execution</div>
            <mat-form-field appearance="outline" class="mid-width">
                <mat-label><span>Memory Request</span></mat-label>
                <mat-error>{{quantityErrMsgMemory}}</mat-error>
                <input placeholder="memory requested for the container. Ex: 1Gi" data-cy="container-memory-request" matInput formControlName="memoryRequest">
            </mat-form-field>
            <mat-form-field appearance="outline" class="mid-width">
                <mat-label><span>Memory Limit</span></mat-label>
                <mat-error>{{quantityErrMsgMemory}}</mat-error>
                <input placeholder="memory limit for the container. Ex: 1Gi" data-cy="container-memory-limit" matInput formControlName="memoryLimit">
            </mat-form-field>
            <mat-form-field appearance="outline" class="mid-width">
                <mat-label><span>CPU Request</span></mat-label>
                <mat-error>{{quantityErrMsgCPU}}</mat-error>
                <input placeholder="CPU requested for the container. Ex: 500m" data-cy="container-cpu-request" matInput formControlName="cpuRequest">
            </mat-form-field>
            <mat-form-field appearance="outline" class="mid-width">
                <mat-label><span>CPU Limit</span></mat-label>
                <mat-error>{{quantityErrMsgCPU}}</mat-error>
                <input placeholder="CPU limit for the container. Ex: 1" data-cy="container-cpu-limit" matInput formControlName="cpuLimit">
            </mat-form-field>

            <h3>Sources</h3>
            <div class="description">Declare if and how sources are mounted into the container's filesystem. By default, sources are automatically mounted into $PROJECTS_ROOT or /projects directory</div>
            <div><mat-checkbox data-cy="container-sources-configuration" formControlName="configureSources">Configure Source mount</mat-checkbox></div>
            <div *ngIf="form.get('configureSources')?.value" class="source-configuration-details">
                <div style="display: inline-flex" class="mid-width">
                    <mat-checkbox data-cy="container-mount-sources" formControlName="mountSources">Mount sources into container</mat-checkbox>
                    <mat-checkbox data-cy="container-sources-specific-directory" matTooltip="${PROJECTS_ROOT} or /projects by default" formControlName="_specificDir">Into specific directory</mat-checkbox>
                </div>
                <mat-form-field appearance="outline" class="mid-width">
                    <mat-label><span>Mount sources into</span></mat-label>
                    <input placeholder="Container's directory on which to mount sources" data-cy="container-source-mapping" matInput formControlName="sourceMapping">
                </mat-form-field>
            </div>

            <h3>Deployment Annotations</h3>
            <div class="description">Annotations added to the Kubernetes Deployment created for running this container</div>
            <app-multi-key-value dataCyPrefix="container-deploy-anno" addLabel="Add Annotation" deleteLabel="Delete Deployment Annotation" formControlName="deployAnnotations"></app-multi-key-value>

            <h3>Service Annotations</h3>
            <div class="description">Annotations added to the Kubernetes Service created for accessing this container</div>
            <app-multi-key-value dataCyPrefix="container-svc-anno" addLabel="Add Annotation" deleteLabel="Delete Service Annotation" formControlName="svcAnnotations"></app-multi-key-value>
        </div>

        <div class="outbutton"><button data-cy="container-less-params" *ngIf="seeMore" mat-flat-button (click)="less()">Less parameters...</button></div>
    </form>

    <div class="buttonbar">
        <button *ngIf="!container" data-cy="container-create" [disabled]="form.invalid" mat-flat-button color="primary" matTooltip="create new container" (click)="create()">Create</button>
        <button *ngIf="container" data-cy="container-save" [disabled]="form.invalid" mat-flat-button color="primary" matTooltip="save container" (click)="save()">Save</button>
        <button *ngIf="cancelable" mat-flat-button (click)="cancel()">Cancel</button>    
    </div>
</div>
